<template>
	<view class="page">
		<view class="my-top" :style="'background: url('+bjImg+') no-repeat;background-size:100% 100%;'">
			<!-- head -->
			<view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
				<view class="portrait">
					<image v-show="scrollTop>20" :src="dataInfo.headimg||'/static/logo.jpg'"></image>
				</view>
				<view class="title">
					<text v-show="scrollTop>20">我的</text>
				</view>
				<view class="setting-mess">
					<!-- <view class="setting" @click="onServer('/pages/Setting/Settings')">
						<text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':''"></text>
					</view>
					<view class="mess" @click="onServer('/pages/Message/Message')">
						<text class="iconfont icon-xiaoxi" :style="scrollTop>20?'color:#333333':''"></text>
					</view> -->
				</view>
			</view>
			<!-- 用户信息 -->
			<view class="user-info" v-if="tui.isLogin()">
				<view class="portrait">
					<image :src="dataInfo.headimg"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>{{dataInfo.nickname}} ( {{dataInfo.level_name}} )</text>
					</view>
					<view class="nickname flex flex-align">
						<text>邀请码:{{dataInfo.inviter_code}}</text>
						<image @click.stop="fuzhi(dataInfo.inviter_code)" src="/static/fuzhi.png" mode="" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;"></image>
					</view>
					<view class="nickname flex flex-align">
						<text>用户ID:{{dataInfo.id}}</text>
						<image @click.stop="fuzhi(JSON.stringify(dataInfo.id))" src="/static/fuzhi.png" mode="" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;"></image>
					</view>
				</view>
			</view>
			<view class="user-info" @click="onUserInfo" v-if="!tui.isLogin()">
				<view class="portrait">
					<image :src="dataInfo.headimg||'/static/logo.jpg'"></image>
				</view>
				<view class="info">
					<view class="nickname">
						<text>登录/注册</text>
					</view>
				</view>
			</view>
			<!-- 关注区 -->
			<view class="focus-area">
				
				<view class="list" @click="onServer('/pages/Setting/Setting')">
					<view class="num">
						<image src="/static/gengxinzl.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="title">
						<text>更新资料</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/SignIn/SignIn')">
					<view class="num">
						<image src="/static/qiandao.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="title">
						<text>签到</text>
					</view>
				</view>
				<view class="list" @click="getRule">
					<view class="num">
						<image src="/static/tihuoma.png" mode="" style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="title">
						<text>提货码</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="titles">
				<text>我的订单</text>
			</view>
			<view class="flex">
				<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=1')">
					<view class="icon">
						<text class="iconfont icon-daifukuan"></text>
						<view class="num" v-if="order.t1!=0">
							<text>{{order.t1>99?'99+':order.t1}}</text>
						</view>
					</view>
					<view class="title">
						<text>待付款</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=2')">
					<view class="icon">
						<text class="iconfont icon-daifahuo"></text>
						<view class="num" v-if="order.t2!=0">
							<text>{{order.t2>99?'99+':order.t2}}</text>
						</view>
					</view>
					<view class="title">
						<text>待配送</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=3')">
					<view class="icon">
						<text class="iconfont icon-daishouhuo"></text>
						<view class="num" v-if="order.t3!=0">
							<text>{{order.t3>99?'99+':order.t3}}</text>
						</view>
					</view>
					<view class="title">
						<text>待提货</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=4')">
					<view class="icon">
						<text class="iconfont icon-tuikuan"></text>
						<view class="num" v-if="order.t4!=0">
							<text>{{order.t4>99?'99+':order.t4}}</text>
						</view>
					</view>
					<view class="title">
						<text>已完成</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/MyOrderList/MyOrderList?type=5')">
					<view class="icon">
						<text class="iconfont icon-daipingjia"></text>
						<view class="num" v-if="order.t5!=0">
							<text>{{order.t5>99?'99+':order.t5}}</text>
						</view>
					</view>
					<view class="title">
						<text>售后服务</text>
					</view>
				</view>
				
			</view>
			
		</view>
		<view class="shequList" v-if="community_pid">
			<view class="list">
				<view class="title">我的当前自提点</view>
				<view class="mendian flex flex-align flex-bt">
					<view class="left">
						<image :src="community_pid.image" mode=""></image>
					</view>
					<view class="center">
						<view class="titles flex flex-align flex-bt" >
							<view class="l flex flex-align">{{community_pid.community_name}}</view>
							<view class="r" v-if="community_pid.km">距离{{community_pid.km}}公里</view>
						</view>
						<!-- <view class="team">团长：{{community_pid.name}}</view> -->
						<view class="team">{{community_pid.address}}</view>
						<view class="flex flex-align" style="margin-top: 10rpx;" @click="telClick(community_pid.phone)">
							<text class="cuIcon cuIcon-phone" style="color: #f20;"></text>
							<view class="">{{community_pid.phone}}</view>
						</view>
					</view>
					<view class="right" @click="openLocation(community_pid)">
						<tui-icon name="gps" color="#999" :size="28"></tui-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 我的服务 -->
		<view class="my-service">
			<view class="title">
				<text>我的服务</text>
			</view>
			<view class="service-list">
				<!-- <view class="list" @click="onServer('/pages/bank/bank_list')">
					<view class="thumb">
						<image src="/static/bank.png"></image>
					</view>
					<view class="name">
						<text>积分商城</text>
					</view>
				</view> -->
				<view class="list" @click="onServer('/pages/MyCoupon/MyCoupon')">
					<view class="thumb">
						<image src="/static/youhuiquan.png"></image>
					</view>
					<view class="name">
						<text>优惠券</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/duihuan/duihuan')">
					<view class="thumb">
						<image src="/static/quanyi.png"></image>
					</view>
					<view class="name">
						<text>礼品兑换</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/duihuan/MyHongbao')">
					<view class="thumb">
						<!-- <image src="/static/bank.png"></image> -->
						<tui-icon name="redpacket-fill" :size="24" color="#999"></tui-icon>
					</view>
					<view class="name">
						<text>红包券</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/tuanzhang/shenqing')" v-if="dataInfo.is_community!=1">
					<view class="thumb">
						<image src="/static/team.png"></image>
					</view>
					<view class="name">
						<text>申请团长</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/tuanzhang/teamCenter')" v-if="dataInfo.is_community==1&&dataInfo.is_agency==2">
					<view class="thumb">
						<image src="/static/team.png"></image>
					</view>
					<view class="name">
						<text>团长中心</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/tuanzhang/dailiCenter')" v-if="dataInfo.is_community==1&&dataInfo.is_agency==1">
					<view class="thumb">
						<image src="/static/team.png"></image>
					</view>
					<view class="name">
						<text>合作中心</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/tuanzhang/orderCount')" v-if="dataInfo.is_hex==1">
					<view class="thumb">
						<image src="/static/hexiao.png"></image>
					</view>
					<view class="name">
						<text>核销列表</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/share/share')">
					<view class="thumb">
						<image src="/static/share.png"></image>
					</view>
					<view class="name">
						<text>分享好友</text>
					</view>
				</view>
				<view class="list" @click="onServer('/pages/help/help')">
					<view class="thumb">
						<image src="/static/share.png"></image>
					</view>
					<view class="name">
						<text>常见问题</text>
					</view>
				</view>
				<!-- <view class="list" @click="onServer('serve')" style="position: relative;">
					<view class="thumb">
						<image src="/static/kfrx.png"></image>
					</view>
					<view class="name">
						<text>客服热线</text>
					</view>
					<button v-if="isLogin" open-type="contact" style="position: absolute;background: transparent;width: 100%;height: 100%;left: 0;top: 0">
						
					</button>
				</view> -->
				<view class="list" @click="onServer('/pages/Feedback/Feedback')">
					<view class="thumb">
						<image src="/static/yjfk.png"></image>
					</view>
					<view class="name">
						<text style="color: #f20;">投诉</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 为你推荐 -->
		
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
				<view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list" @click="telClick(dataInfo.kf_phone)">
							<text style="color: #959595;">{{dataInfo.kf_phone}}</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="rule-win">
			<view class="cu-modal" :class="{'show':isRule}">
				<view class="cu-dialog" style="width: 630rpx;">
					<view class="cu-bar bg-white justify-end">
						<view class="content">您的提货码为</view>
						<view class="action">
							<text class="cuIcon-close text-red" @click="isRule = false"></text>
						</view>
					</view>
					<view class="rule-content">
						<image :src="quhuoImg" mode="" style="width: 300rpx;height: 300rpx;margin: 0 auto;display: block;"></image>
						<view class="" style="color:#999;text-align: center;margin: 40rpx 0 20rpx;">
							提货时请出示提货二维码
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 150rpx;"></view>
		<view class="qrimg">
			<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="val" :size="size" :unit="unit"
				:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
				:onval="onval" :loadMake="loadMake" @result="qrR" />
		</view>
		<tui-login :show="show"  @close="guanbi"></tui-login>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
		<tui-img top="0" right="0" :show="zhiboShow" @finish='endjie'></tui-img>
	</view>
</template>

<script>
	import wx from 'jweixin-module'
	import zbCode from '@/components/zb-code/zb-code.vue'
	import TabBar from '../../components/TabBar/TabBar.vue';
	export default {
		components: {
			TabBar,
			zbCode
		},
		data() {
			return {
				scrollTop: 0,
				isHotline: false,
				dataInfo: '',
				goodsList: [],
				page: 1,
				isRule:false,
				show:false,
				isLogin:false,
				community_pid:'',
				longitude:'',
				latitude:'',
				quhuoImg:'',
				bjImg:'',
				order:'',
				zhiboShow:false,
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				src: '', // 二维码生成后的图片地址或base64
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#000', // 角标色
				icon: '/static/logo.jpg', // 二维码图标
				iconsize: 20, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			let that = this
			that.isLogin = this.tui.isLogin()
			that.getImg()
		},
		onShow() {
			let that = this
			that.isLogin = this.tui.isLogin()
			
			uni.$off('isShow');
			uni.$off('isLogin');
			uni.$off('fcNotic');
			uni.$on('isShow', function(data) {
				that.show = true
			});
			uni.$on('fcNotic', function(data) {
				that.zhiboShow = data
			});
			uni.$on('isLogin', function(data) {
				that.getdata()
				that.isLogin = this.tui.isLogin()
				that.tui.wxShare()
			});
			if(that.isLogin){
				that.tui.zhiboList(1)
				that.getdata()
				that.tui.wxShare()
				
			}else{
				// that.tui.wetLogin()
			}
		},
		
		onUnload() {
			/** 这里只保留最新的15条会话记录，以保证初次加载性能 */
			uni.$off('isShow');
			uni.$off('isLogin');
			uni.$off('fcNotic');
		},
		// #ifdef MP
		onShareAppMessage() {
			return {
				title:'分享海报',
				path:'/pages/home/home?inviter_code='+this.dataInfo.inviter_code,
			};
		},
		// #endif
		methods: {
			guanbi(){
				this.show = false
			},
			endjie(e){
				this.zhiboShow = e
			},
			qrR(res){
				this.quhuoImg = res
				console.log()
			},
			getRule(){
				let that = this
				this.isRule = true
				// that.getQuhuoma()
			},
			openLocation: function (value) {
				let that = this
				// #ifdef H5
				that.tui.request("api.auth.live/scan", "POST", {}, false, false, true).then((sss) => {
					console.log(sss)
					if(sss.code==1){
						wx.config({
						  debug: false, // 是否开启调试模式
						  appId: sss.data.info.appId, // 必填，公众号的唯一标识
						  timestamp: sss.data.info.timestamp, // 必填，生成签名的时间戳
						  nonceStr: sss.data.info.nonceStr, // 必填，生成签名的随机串
						  signature: sss.data.info.signature, // 必填，签名，见附录1
						  jsApiList:sss.data.info.jsApiList
						})
						wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
						 wx.openLocation({
						   latitude: Number(value.longitude), // 纬度，浮点数，范围为90 ~ -90
						   longitude:Number(value.latitude), // 经度，浮点数，范围为180 ~ -180。
						   name: value.address_area, // 位置名
						   address:value.address, // 地址详情说明
						   scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
						   infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
						 });
						});
					}
				}).catch((res) => {
					
				})
				// #endif
				// #ifdef MP
				uni.openLocation({
					longitude: Number(value.longitude),
					latitude: Number(value.latitude),
					name: value.address_area,
					address: value.address
				})
				// #endif
				
			},
			getImg(){
				let that = this
				that.tui.request("api.data/bgInfo", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.bjImg = res.data.center_bg
					}
				}).catch((res) => {
				
				})
			},
			getQuhuoma(){
				let that = this
				// #ifdef H5
				that.tui.request("api.auth.live/orderNucWechat", "POST", {}, false, false, true).then((res) => {
				// #endif
				// #ifdef MP
				that.tui.request("api.auth.live/orderNuc", "POST", {}, false, false, true).then((res) => {
				// #endif
					console.log(res)
					if(res.code==1){
						that.isRule = true
						// #ifdef H5
						that.quhuoImg = res.data.url
						// #endif
						// #ifdef MP
						that.quhuoImg = res.data.base64
						// #endif
					}
				}).catch((res) => {
				
				})
			},
			getdata() {
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.dataInfo = res.data
						that.order = res.data.order
						that.val =that.tui.faceUrl()+'#/pages/hexiaoList/hexiaoList?uuid='+res.data.id+"&type=1"
						console.log(that.val)
						if(that.dataInfo.community_pid){
							that.community_pid = that.dataInfo.community_pid
							// #ifdef H5
							that.tui.request("api.auth.live/scan", "POST", {}, false, false, true).then((sss) => {
								console.log(sss)
								if(sss.code==1){
									wx.config({
									  debug: false, // 是否开启调试模式
									  appId: sss.data.info.appId, // 必填，公众号的唯一标识
									  timestamp: sss.data.info.timestamp, // 必填，生成签名的时间戳
									  nonceStr: sss.data.info.nonceStr, // 必填，生成签名的随机串
									  signature: sss.data.info.signature, // 必填，签名，见附录1
									  jsApiList:sss.data.info.jsApiList
									})
									wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
									 wx.getLocation({
									   type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
									   success: function (ddd) {
										 that.longitude = ddd.longitude
										 that.latitude = ddd.latitude
										 that.getShequ()
									   }
									 });
									});
								}
							}).catch((res) => {
								
							})
							// #endif
						}
					}
				}).catch((res) => {

				})
			},
			getShequ(){
				let that = this
				that.tui.request("api.auth.center/km", "POST", {longitude:that.longitude,latitude:that.latitude}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.community_pid = res.data.info
					}
				}).catch((res) => {
				
				})
			},
			telClick(e) {
				uni.makePhoneCall({
					phoneNumber: e //仅为示例
				});
			},
			fuzhi(e){
				let that = this
				console.log(e)
				uni.setClipboardData({
					data: e,
					success: function () {
					 that.tui.toast('复制成功')
					},
				})
			},
		
			onServer(type) {
				if(this.tui.isLogin()){
					if (type == 'serve') {
						// this.isHotline = true;
					} else {
						this.tui.href(type)
					}
				}else{
					// this.tui.wetLogin()
					setTimeout(function(){
						uni.redirectTo({
							url: '/pages/login/login'
						})
					},1000)
				}
			},
		
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo() {
				// this.tui.wetLogin()
				setTimeout(function(){
					uni.redirectTo({
						url: '/pages/login/login'
					})
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';
	.rule-win{
		.rule-content{background: #fff;
			padding: 20rpx 4%;
			text-align: left;
			text{
				font-size: 26rpx;
				color: #555555;
				text-align: left;
				line-height: 50rpx;
			}
		}
	}
	.shequList{margin-top: 100rpx;background: #fff;margin: 0 24rpx;border-radius: 10rpx;
		.list{
			.title{padding:30rpx 30rpx 0;border-bottom: 1px solid #eee;padding-bottom: 20rpx;}
			.mendian{padding:0 30rpx 30rpx;margin: 30rpx 0;border-bottom: 1px solid #eee;
				.left{margin-right: 20rpx;
					image{width: 150rpx;height: 150rpx;}
				}
				.center{width:560rpx;
					.titles{
						.l{font-size: 30rpx;color: #f20;font-weight: bold;
							image{width: 60rpx;height: 60rpx;border-radius: 10rpx;margin-right: 10rpx;}
						}
						.r{color: #f20;}
					}
					.team{margin: 10rpx 0;color: #999;}
				}
			}
		}
	}
</style>